<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <title>
        添加用户自定义标签名，双击修改标签名 |
        
        Dai&#39;s blog
    </title>
    <link rel="shortcut icon" href="/myblog/images/logo.svg">
    
<link rel="stylesheet" href="/myblog/css/style.css">

    <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/css/font-awesome.min.css">
    <script id="hexo-configurations">
    let KEEP = window.KEEP || {};
    KEEP.hexo_config = {"hostname":"dai_ya_ting.gitee.io","root":"/myblog/","path":"search.xml"};
    KEEP.theme_config = {"toc":{"enable":true,"number":true,"expand_all":true},"style":{"primary_color":"#0066CC","avatar":"/images/avatar.png","favicon":"/images/logo.svg","img_position":"left","left_side_width":"260px","content_max_width":"900px","hover":{"shadow":true,"scale":false},"first_screen":{"enable":true,"background_img":"/images/bg.svg","description":"不积跬步，无以至千里；不积小流，无以成江海。"}},"local_search":{"enable":true,"trigger":"auto","unescape":false,"preload":true},"version":"3.0.4"};
    KEEP.language = {"search":"Search...","prev":"Prev","next":"Next","prev_posts":"Prev posts","next_posts":"Next posts","page":"Page %d","recent_posts":"Recent Posts","share":"Share","powered_by":"Powered by %s","theme":"Theme","rss_feed":"RSS Feed","category":"Category","categories":"Categories","tag":"Tag","tags":"Tags","tagcloud":"Tag Cloud","comment":"Comment","home":"Home","archive":"Archive","archives":"Archives","about":"About","site_uv":"Visitor Count","site_pv":"Totalview","links":"Links","link":"Link","top":"TOP","read_more":"Read more","wordcount":"Words","min2read":"Mins","changelog":"Changelog","copyright":{"author":"Post author","title":"Post title","link":"Post link","create_time":"Create time","license_title":"Copyright Notice","license_content":"All articles in this blog are licensed under %s unless stating additionally."},"ago":{"second":"%s seconds ago","minute":"%s minutes ago","hour":"%s hours ago","day":"%s days age","week":"%s weeks age","month":"%s months age","year":"%s years age"}};
  </script>
<meta name="generator" content="Hexo 5.2.0"></head>


<body>
<div class="page-container">

    

    <header class="page-header">
        <div class="header-progress"></div>
    </header>

    <main class="page-main">

        <div class="page-main-content">

            <div class="page-main-content-top">
                <header class="header-wrapper">

    <div class="header-content">
        <a class="logo-title" href="/">
            Dai&#39;s blog
        </a>

        <ul class="menu-list">
            
                <li class="menu-item">
                    <a class=""
                       href="/myblog/"
                    >
                        首页
                    </a>
                </li>
            
                <li class="menu-item">
                    <a class=""
                       href="/myblog/archives"
                    >
                        档案
                    </a>
                </li>
            
        </ul>

        <div class="menu-bar">
            <div class="menu-bar-middle"></div>
        </div>
    </div>

    <div class="header-drawer">
        <ul class="drawer-menu-list">
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/myblog/">首页</a>
                </li>
            
                <li class="drawer-menu-item flex-center">
                    <a class=""
                       href="/myblog/archives">档案</a>
                </li>
            
        </ul>
    </div>

    <div class="window-mask"></div>

</header>


            </div>

            <div class="page-main-content-middle">

                <main class="main-content normal-code-theme">

                    
                        <div class="fade-in-down-animation">
    <div class="article-content-container">

        <div class="article-title">
            <span class="title-hover-animation">添加用户自定义标签名，双击修改标签名</span>
        </div>

        
            <div class="article-header">
                <div class="avatar">
                    <img src="/myblog/images/avatar.png">
                </div>
                <div class="info">
                    <div class="author">
                        <span>Daiyating</span>
                        <span class="level">Lv1</span>
                    </div>
                    <div class="meta-info">
                        <div class="article-meta-info">
    <span class="article-date article-meta-item">
        <i class="fas fa-calendar"></i> 2021-02-02 13:08:55
    </span>
    
    

    
    
    
    
        <span class="article-pv article-meta-item">
            <i class="fas fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
        </span>
    
</div>

                    </div>
                </div>
            </div>
        

        <div class="article-content markdown-body">
            <p>网络上没有找到适合手中项目的代码，在此记录一下。  </p>
<p>项目中截取的代码片段：  </p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br></pre></td><td class="code"><pre><span class="line">&lt;el-tabs v-model&#x3D;&quot;prefabTemplateTabValue&quot; type&#x3D;&quot;card&quot; @tab-remove&#x3D;&quot;prefabTemplateRemoveTab&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;el-tab-pane:closable&#x3D;&quot;index1&gt;0&amp;&amp;!isRead&quot;</span><br><span class="line">v-for&#x3D;&quot;(prefabTemplate,index1)inprefabTemplateList&quot;</span><br><span class="line">:key&#x3D;&quot;index1&quot;</span><br><span class="line">:name&#x3D;&quot;prefabTemplate.key&quot;</span><br><span class="line">&gt;</span><br><span class="line"></span><br><span class="line">&lt;spanslot&#x3D;&quot;label&quot;@dblclick&#x3D;&quot;alterPrefabTemplateName(prefabTemplate)&quot;&gt;</span><br><span class="line">&#123;&#123;prefabTemplate.name&#125;&#125;</span><br><span class="line">&lt;&#x2F;span&gt;</span><br><span class="line">&lt;!--内部内容--&gt;</span><br><span class="line">&lt;&#x2F;el-tab-pane&gt;</span><br><span class="line"></span><br><span class="line">&lt;el-tab-panedisabledv-if&#x3D;&quot;!isRead&quot;&gt;</span><br><span class="line">&lt;spanslot&#x3D;&quot;label&quot;@click&#x3D;&quot;addPrefabTemplate&quot;</span><br><span class="line">style&#x3D;&quot;display:inline-block;width:30px;text-align:center;cursor:pointer&quot;&gt;</span><br><span class="line">+</span><br><span class="line">&lt;&#x2F;span&gt;</span><br><span class="line">&lt;&#x2F;el-tab-pane&gt;</span><br><span class="line"></span><br><span class="line">&lt;&#x2F;el-tabs&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">Method:</span><br><span class="line">&#x2F;*删除标签*&#x2F;</span><br><span class="line">prefabTemplateRemoveTab(targetName)&#123;</span><br><span class="line">this.$confirm(&#39;是否确认删除？&#39;,&quot;警告&quot;,&#123;</span><br><span class="line">confirmButtonText:&quot;确定&quot;,</span><br><span class="line">cancelButtonText:&quot;取消&quot;,</span><br><span class="line">type:&quot;warning&quot;</span><br><span class="line">&#125;).then(()&#x3D;&gt;&#123;</span><br><span class="line">lettabs&#x3D;this.prefabTemplateList;</span><br><span class="line">letactiveName&#x3D;targetName;</span><br><span class="line">letactiveIndex&#x3D;-1;</span><br><span class="line">tabs.forEach((tab,index)&#x3D;&gt;&#123;</span><br><span class="line">if(tab.key&#x3D;&#x3D;targetName)&#123;</span><br><span class="line">activeIndex&#x3D;index;</span><br><span class="line">letnextTab&#x3D;tabs[index-1];</span><br><span class="line">if(nextTab)&#123;</span><br><span class="line">activeName&#x3D;nextTab.key;</span><br><span class="line">&#125;</span><br><span class="line">&#125;</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">if(activeIndex&gt;&#x3D;0)&#123;</span><br><span class="line">this.prefabTemplateTabValue&#x3D;activeName;</span><br><span class="line">this.prefabTemplateList.splice(activeIndex,1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;).catch(()&#x3D;&gt;&#123;</span><br><span class="line">&#125;)</span><br><span class="line">&#125;,</span><br><span class="line">&#x2F;*双击修改标签名*&#x2F;</span><br><span class="line">alterPrefabTemplateName(target)&#123;</span><br><span class="line"></span><br><span class="line">if(this.isRead)&#123;</span><br><span class="line">return;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">this.$prompt(&#39;请输入标签名&#39;,&#39;提示&#39;,&#123;</span><br><span class="line">confirmButtonText:&#39;确定&#39;,</span><br><span class="line">cancelButtonText:&#39;取消&#39;,</span><br><span class="line">inputValue:target.name</span><br><span class="line">&#125;).then((&#123;value&#125;)&#x3D;&gt;&#123;</span><br><span class="line">&#x2F;*替换新的标签名*&#x2F;</span><br><span class="line">varisCan&#x3D;true;</span><br><span class="line">if(value&#x3D;&#x3D;null||value&#x3D;&#x3D;&#39;&#39;)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能为空&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;elseif(value.length&gt;10)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能超过10个字&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;else&#123;</span><br><span class="line">lettabs&#x3D;this.prefabTemplateList;</span><br><span class="line">tabs.forEach((tab,index)&#x3D;&gt;&#123;</span><br><span class="line">if(tab.name!&#x3D;target.name&amp;&amp;tab.name&#x3D;&#x3D;value)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能重复！&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;</span><br><span class="line">&#125;);</span><br><span class="line">if(isCan)&#123;</span><br><span class="line">target.name&#x3D;value;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&#125;&#125;).catch(()&#x3D;&gt;&#123;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;this.$message(&#123;</span><br><span class="line">&#x2F;&#x2F;type:&#39;info&#39;,</span><br><span class="line">&#x2F;&#x2F;message:&#39;取消输入&#39;</span><br><span class="line">&#x2F;&#x2F;&#125;);</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line">&#125;,</span><br><span class="line">&#x2F;&#x2F;自定义输入标签名</span><br><span class="line">addPrefabTemplate()&#123;</span><br><span class="line"></span><br><span class="line">this.$prompt(&#39;请输入标签名&#39;,&#39;提示&#39;,&#123;</span><br><span class="line"></span><br><span class="line">confirmButtonText:&#39;确定&#39;,</span><br><span class="line">cancelButtonText:&#39;取消&#39;,</span><br><span class="line"></span><br><span class="line">&#125;).then((&#123;value&#125;)&#x3D;&gt;&#123;</span><br><span class="line">varisCan&#x3D;true;</span><br><span class="line">if(value&#x3D;&#x3D;null||value&#x3D;&#x3D;&#39;&#39;)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能为空&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;elseif(value.length&gt;10)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能超过10个字&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;else&#123;</span><br><span class="line">lettabs&#x3D;this.prefabTemplateList;</span><br><span class="line">tabs.forEach((tab,index)&#x3D;&gt;&#123;</span><br><span class="line">if(tab.name&#x3D;&#x3D;value)&#123;</span><br><span class="line">this.msgError(&quot;标签名不能重复！&quot;);</span><br><span class="line">isCan&#x3D;false;</span><br><span class="line">&#125;</span><br><span class="line">&#125;)</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">if(isCan)&#123;</span><br><span class="line">varprefabTemplateInfoItem&#x3D;deepClone(this.prefabTemplateInfoItem);</span><br><span class="line">varprefabTemplateTabItem&#x3D;deepClone(objectMerge(this.prefabTemplateTabItem,&#123;</span><br><span class="line">name:value,</span><br><span class="line">key:newDate().getTime()+&quot;&quot;</span><br><span class="line">&#125;));</span><br><span class="line">prefabTemplateTabItem.infoList.push(prefabTemplateInfoItem);</span><br><span class="line">this.prefabTemplateList.push(prefabTemplateTabItem);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">&#125;).catch(()&#x3D;&gt;&#123;</span><br><span class="line"></span><br><span class="line">&#x2F;&#x2F;this.$message(&#123;</span><br><span class="line">&#x2F;&#x2F;type:&#39;info&#39;,</span><br><span class="line">&#x2F;&#x2F;message:&#39;取消输入&#39;</span><br><span class="line">&#x2F;&#x2F;&#125;);</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line">&#125;,</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>效果：<br><img src="https://i.loli.net/2021/02/02/spr8RxHQoYdFiXJ.png" alt="image.png"><br><img src="https://i.loli.net/2021/02/02/VihWv6Lu137fbkD.png" alt="image.png">  </p>

        </div>

        

        
            <div class="article-nav">
                
                    <div class="article-prev">
                        <a class="prev"
                           rel="prev"
                           href="/myblog/2021/02/05/%E3%80%90%E8%BD%AC%E8%BD%BD%E3%80%91%E5%AF%B9%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D%E5%92%8C%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D%E7%9A%84%E7%90%86%E8%A7%A3/"
                        >
                            <span class="left arrow-icon flex-center" >
                              <i class="fas fa-chevron-left"></i>
                            </span>
                            <span class="title flex-center">
                                <span class="post-nav-title-item">【转载】对相对定位和绝对定位的理解</span>
                                <span class="post-nav-item">Prev posts</span>
                            </span>
                        </a>
                    </div>
                
                
                    <div class="article-next">
                        <a class="next"
                           rel="next"
                           href="/myblog/2021/01/29/%E4%BD%BF%E7%94%A8%E8%8B%A5%E4%BE%9D%E6%97%B6%E7%9A%84%E5%B8%B8%E8%A7%81%E9%94%99%E8%AF%AF%E5%8F%8A%E8%A7%A3%E5%86%B3%E6%96%B9%E6%B3%95/"
                        >
                            <span class="title flex-center">
                                <span class="post-nav-title-item">使用若依时的常见错误及解决方法</span>
                                <span class="post-nav-item">Next posts</span>
                            </span>
                            <span class="right arrow-icon flex-center" >
                              <i class="fas fa-chevron-right"></i>
                            </span>
                        </a>
                    </div>
                
            </div>
        

        
    </div>
</div>


                    
                </main>

            </div>

            <div class="page-main-content-bottom">
                <footer class="footer">
    <div class="info-container">
        <div class="copyright-info info-item">
            &copy;
            
              <span>2020</span> -
            
            2021 <i class="fas fa-heart icon-animate"></i> <a href="/">Daiyating</a>
        </div>
        
            <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <div class="website-count info-item">
                
                    <span id="busuanzi_container_site_uv">
                        Visitor Count <span id="busuanzi_value_site_uv"></span>&ensp;
                    </span>
                
                
                    <span id="busuanzi_container_site_pv">
                        Totalview <span id="busuanzi_value_site_pv"></span>
                    </span>
                
            </div>
        
        <div class="theme-info info-item">
            Powered by <a target="_blank" href="https://hexo.io">Hexo</a> | Theme <a class="theme-version" target="_blank"></a>
        </div>
    </div>
</footer>

            </div>
        </div>
    </main>

    <div class="sidebar-tools">
        <div class="tools-container">
    <ul class="tools-list">
        
            <li class="search popup-trigger">
                <i class="fas fa-search"></i>
            </li>
        

        

        <!-- TOC aside toggle -->
        
            <li class="tools-item page-aside-toggle">
                <i class="fas fa-outdent"></i>
            </li>
        

    </ul>
</div>

    </div>

    <div class="right-bottom-side-tools">
        <div class="side-tools-container">

    <ul class="side-tools-list">
        <li class="tools-item tool-font-adjust-plus flex-center">
            <i class="fas fa-search-plus"></i>
        </li>

        <li class="tools-item tool-font-adjust-minus flex-center">
            <i class="fas fa-search-minus"></i>
        </li>

        <li class="tools-item tool-expand-width flex-center">
            <i class="fas fa-arrows-alt-h"></i>
        </li>

        <li class="tools-item tool-dark-light-toggle flex-center">
            <i class="fas fa-moon"></i>
        </li>

        <!-- rss -->
        

        <li class="tools-item tool-scroll-to-top flex-center">
            <i class="fas fa-arrow-up"></i>
        </li>

        <li class="tools-item tool-scroll-to-bottom flex-center">
            <i class="fas fa-arrow-down"></i>
        </li>
    </ul>

    <ul class="tools-ul-1">
        <li class="tools-item tool-toggle-show flex-center">
            <i class="fas fa-cog fa-spin"></i>
        </li>

    </ul>
</div>

    </div>

    <!-- page aside -->
    <aside class="page-aside">
        
            <div class="post-toc-wrap">
    <div class="post-toc">
        
    </div>
</div>
        
    </aside>

    <!-- image viewer -->
    <div class="image-viewer-container">
    <div class="img-box">
        <img src="">
    </div>
</div>


</div>



    <div class="search-pop-overlay">
    <div class="popup search-popup">
        <div class="search-header">
          <span class="search-icon">
            <i class="fas fa-search"></i>
          </span>
            <div class="search-input-container">
                <input autocomplete="off"
                       autocorrect="off"
                       autocapitalize="off"
                       placeholder="Search..."
                       spellcheck="false"
                       type="search"
                       class="search-input"
                >
            </div>
            <span class="popup-btn-close">
                <i class="fas fa-times"></i>
            </span>
        </div>
        <div id="search-result">
            <div id="no-result">
                <i class="fas fa-spinner fa-pulse fa-5x fa-fw"></i>
            </div>
        </div>
    </div>
</div>



<script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/utils.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/main.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/header-shrink.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/back2top.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/dark-light-toggle.js"></script>


    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/local-search.js"></script>




    <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/left-side-toggle.js"></script>

    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/code-copy.js"></script>
    

    
        <script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/libs/anime.min.js"></script><script src="//cdn.jsdelivr.net/npm/hexo-theme-keep@3.0.4/source/js/toc.js"></script>
    


</body>
</html>